<script setup>
import { ref, reactive, toRefs } from 'vue';

const selectedItem = ref(null); // 存储当前选中的项——保存选中项的key值
const dialogVisible = ref(false);
const currentImageSrc = ref('');
const currentName = ref('');

const formRef = ref(null); // 使用 ref 来引用 el-form 组件
const { proxy } = getCurrentInstance();
const data = reactive([
  {
    "key": "purple", "name": "紫影幽蓝",
    "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/f5406925-fbea-498e-bfb8-af900069e659/1.png"
  },
  {
    "key": "green", "name": "清新翠绿",
    "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/dfea2504-6c84-4e72-8878-9232c7795cbf/2.png"
  },
  {
    "key": "lightblue", "name": "清逸天蓝 ",
    "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/5818984f-2f17-4814-84d0-622cc157e4cd/3.png"
  },
  {
    "key": "taupe", "name": "质感之境",
    "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/4c94360b-5b09-41a5-a16d-07a881d0e236/4.png"
  },
  {
    "key": "blue", "name": "星光夜影",
    "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/9bb5f37e-9983-4d47-abbf-0e322e964d85/5.png"
  },
  {
    "key": "telecomRed", "name": "炽热暖阳",
    "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/2477dccf-85b7-48e7-86a1-e1f574c11a36/6.png"
  },
  {
    "key": "telecomGreen", "name": "幻翠奇旅",
    "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/6c77d553-4f04-4ff6-845d-ae6e579bf8b6/7.png"
  },
  {
    "key": "dragon", "name": "龙韵新禧",
    "thumbnail": "https://openres.xfyun.cn/xfyundoc/2024-01-23/6694baab-7e49-4e3f-8d03-eee11c0e3f5a/1705975235721/8.png"
  },
  {
    "key": "bluedream", "name": "蓝梦白翼",
    "thumbnail": "https://openres.xfyun.cn/xfyundoc/2024-01-23/ad3b551d-5482-43d9-95ce-d4a36d1114cc/1705975293375/9.png"
  },
  {
    "key": "deepdark", "name": "墨韵金章",
    "thumbnail": "https://openres.xfyun.cn/xfyundoc/2024-01-22/e79ed3f0-2a9e-4514-b7f6-b526b5e1699d/1705909573847/10.png"
  },
  {
    "key": "starryJourney", "name": "星辰旅途",
    "thumbnail": "http://bjcdn.openstorage.cn/open_res/ysw_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2011.png"
  },
  {
    "key": "rippleWaters", "name": "水波涟漪",
    "thumbnail": "http://bjcdn.openstorage.cn/open_res/qu1_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2012.png"
  },
  {
    "key": "crystalFrost", "name": "晶莹霜华",
    "thumbnail": "http://bjcdn.openstorage.cn/open_res/cs7_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2013.png"
  },
  {
    "key": "sereneSnowMountain", "name": "雪山静谧",
    "thumbnail": "http://bjcdn.openstorage.cn/open_res/le5_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2014.png"
  },
  {
    "key": "auroraMiracle", "name": "极光奇迹",
    "thumbnail": "http://bjcdn.openstorage.cn/open_res/u8o_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2015.png"
  },
  {
    "key": "dawnMistRising", "name": "晨雾初升",
    "thumbnail": "http://bjcdn.openstorage.cn/open_res/2mh_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2016.png"
  },
  {
    "key": "nightSkyMirror", "name": "夜空之镜",
    "thumbnail": "http://bjcdn.openstorage.cn/open_res/k2c_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2017.png"
  },
  {
    "key": "whisperingWaves", "name": "海浪呢喃",
    "thumbnail": "http://bjcdn.openstorage.cn/open_res/aiv_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2018.png"
  },
  {
    "key": "brocadeDragonSoar", "name": "锦绣龙腾",
    "thumbnail": "http://bjcdn.openstorage.cn/open_res/cym_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2019.png"
  },
  {
    "key": "stagePrelude", "name": "舞台序曲",
    "thumbnail": "http://bjcdn.openstorage.cn/open_res/m9b_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2020.png"
  }
])
import { ElLoading } from 'element-plus'

const form = reactive({
  formData: {
    name: '',
    speaker: '',
  },
  rules: {
    name: [
      { required: true, message: '请输入PPT题目', trigger: 'blur' },
      { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
    ],
    speaker: [
      { required: true, message: '请输入演讲人', trigger: 'blur' },
    ]
  }
});

const { formData, rules } = toRefs(form);
import { pptMade } from "@/api/utils/chat";

function showPopup(item) {
  dialogVisible.value = true;
  currentImageSrc.value = item.thumbnail;
  currentName.value = item.name;
  selectedItem.value = item.key;
}

function resetForm() {
  formData.value.name = '';
  formData.value.speaker = '';
}

function close() {
  dialogVisible.value = false;
  resetForm();
}

function handelConfirm() {
  if (formRef.value) {
    formRef.value.validate((valid) => {
      if (valid) {
        // 调用生成 PPT 的接口
        const loading = ElLoading.service({
          lock: true,
          text: '正在生成，请勿刷新页面...',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        pptMade(formData.value.name, formData.value.speaker,selectedItem.value).then((response) => {
          console.log("Response URL:", response);
          // 创建一个隐藏的 <a> 元素并触发下载
          const link = document.createElement('a');
          link.href = response; // 设置下载文件的 URL
          link.download = ''; // 可以指定文件名，如果 response URL 中没有文件名的话
          document.body.appendChild(link);
          link.click(); // 触发点击事件进行下载
          document.body.removeChild(link); // 下载后移除链接
          proxy.$modal.msgSuccess("PPT生成成功！");
          loading.close()
          resetForm(); // 重置表单
          close(); // 关闭对话框
        }).catch(error => {
          console.error("Download failed:", error);
        });
      } else {
        console.log("Form validation failed");
      }
    });
  } else {
    console.log("Form reference is not available");
  }
}
</script>

<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <el-card style="margin: 15px ;overflow-y: auto;height: 85vh;">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in data" :key="index">
          <el-card style="margin: 10px 0;" id="theme-item" @mouseover="item.showButton = true"
                   @mouseleave="item.showButton = false">
            <img :src="item.thumbnail" class="thumbnail" />
            <p class="name">{{ item.name }}</p>
            <el-button v-if="item.showButton" class="popup-button" type="warning" @click="showPopup(item)"
                       plain>使用此模板</el-button>
            <div class="cover"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog title="定义ppt" v-model="dialogVisible">
      <img :src="currentImageSrc" alt="点击的图片" class="dialog-image" />
      <p class="dialog-name">{{ currentName }}</p>
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="PPT题目" prop="name">
          <el-input v-model="formData.name" type="text" placeholder="请输入PPT题目" clearable></el-input>
        </el-form-item>
        <el-form-item label="演讲人" prop="speaker">
          <el-input v-model="formData.speaker" type="text" placeholder="请输入演讲人" clearable></el-input>
        </el-form-item>
      </el-form>
      <slot name="footer" class="dialog-footer">
        <el-button type="primary" @click="handelConfirm" style="margin-left: 350px;">确定</el-button>
        <el-button @click="close">取消</el-button>
      </slot>
    </el-dialog>
  </div>
</template>


<style scoped>
.thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.name {
    text-align: center;
    margin-top: 10px;
}

#theme-item {
    position: relative;
}

#theme-item:hover {
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


.dialog-image {
    width: 100%;
    height: 300px;
    object-fit: contain;
}

.dialog-name {
    text-align: center;
    margin-top: 10px;
}

.popup-button {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
</style>
